<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="代理详情" left-arrow fixed @click-left="onClickLeft">
        </van-nav-bar>
        <!-- <div class="level_btn" @click="handleLevelCredit">代理签约</div> -->
        <div class="detail_top" v-if="agentItem.owner">
            <img class="detail_head" :src="agentItem.owner.avatar_url" alt="">
            <div class="detail_con">
                <div>{{ agentItem.owner.name }}</div>
                <div>{{ agentItem.region_name }}</div>
            </div>
            <img class="detail_right" src="../../../images/icon_yqy.png" alt="">
            <div class="detail_text">{{ agentItem.signing_status=='AUTHORIZED'?'已授权': agentItem.signing_status=='SIGNED'?'已签约':'-'}}</div>
        </div>
        <div class="level_data">
            <div class="level_data_img">
                <img src="../../../images/mine/icon_shuju.png" />
                区域代理销售数据
            </div>
            <div class="level_data_text">
                <div style="margin-bottom: .1rem;">区域站长数：{{ agentItem.store_count }}</div>
                <div style="margin-bottom: .1rem;">今日营业额：{{ agentItem.today_turnover }}</div>
                <div style="margin-bottom: .1rem;">本月营业额：{{ agentItem.month_turnover }}</div>
                <div style="margin-bottom: .1rem;">总营业额：{{ agentItem.total_turnover }}</div>
            </div>
        </div>
        <div class="level_data" v-if="agentItem.company">
            <div class="level_data_img">
                <img src="../../../images/mine/icon_shuju.png" />
                区域代理公司信息
            </div>
            <div class="level_data_text">
                <div>公司名称<span>{{ agentItem.company.company_name }}</span> </div>
                <div>公司社会信用代码<span>{{ agentItem.company.credit_code }}</span> </div>
                <div>法人姓名<span>{{ agentItem.company.legal_person_name }}</span> </div>
                <div>股东名称<span>{{ agentItem.company.shareholder }}</span> </div>
                <div>联系电话<span>{{ agentItem.company.contact_number }}</span> </div>
                <div>
                    公司营业执照
                    <div><img v-i @click="handleImage(agentItem.company.business_license)"
                            :src="agentItem.company.business_license" alt=""></div>
                </div>
                <div>
                    公司门头照
                    <div>
                        <img v-for="item, index in agentItem.company.front_images" @click="handleImage(item)" :src="item"
                            alt="">
                    </div>
                </div>
                <div>
                    公司内部展示照
                    <div>
                        <img v-for="item, index in agentItem.company.inside_images" @click="handleImage(item)"
                            :src="item" alt="">
                    </div>
                </div>
                <div>
                    公司组织架构图
                    <div>
                        <img v-for="item, index in agentItem.company.organization_chart" @click="handleImage(item)"
                            :src="item" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { AGENT_DATA_INFO } from '@/api/mine'
import { ImagePreview } from 'vant';
export default {
    data() {
        return {
            code: this.$route.query.code,
            agentItem: {},
        };
    },
    mounted() {
        this.getAgentInfo()
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        getAgentInfo() {
            this.$http.get(AGENT_DATA_INFO + '?code=' + this.$route.query.code).then(res => {
                this.agentItem = res.data
            })
        },
        handleImage(img) {
            ImagePreview([img]);
        }
    },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    //   min-height: 100vh;
    min-height: calc(100vh - 46px);

    padding-top: 46px;
    background: #f2f4f5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.level_data {
    width: 95%;
    margin: 0 auto;
    background: #fff;
    padding-bottom: 0.2rem;
    border-radius: 8px;
    margin-top: .24rem;

    // margin-top: 0.2rem;
    .level_data_img {
        background: #f4f7fd;
        border-radius: 8px 8px 0px 0px;
        // opacity: 0.06;
        padding: 0.2rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 0.28rem;
        // line-height: 0.4rem;
        // text-align: left;
        color: #333333;
        font-style: normal;

        img {
            width: 0.32rem;
            vertical-align: middle;
        }
    }

    .level_data_text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 0.24rem;
        color: #666666;
        line-height: 0.44rem;
        // text-align: left;
        font-style: normal;
        padding-left: 0.2rem;
        margin-top: 0.2rem;

        div {
            display: flex;
            justify-content: space-between;
            margin-bottom: .32rem;

            span {
                margin-right: .2rem;
                color: #333;
            }

            div {
                margin: 0;
                padding: 0;

                img {
                    width: .72rem;
                    margin-right: .2rem;
                }
            }

        }
    }
}

.detail_top {
    width: 95%;
    margin: 0 auto;
    background: url('../../../images/icon_bg.png') no-repeat center;
    border-radius: .16rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .16rem .36rem;
    box-sizing: border-box;
    margin-top: .32rem;
    position: relative;

    .detail_head {
        width: .92rem;
    }

    .detail_con {
        width: calc(100% - 1.64rem - .92rem);
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: .28rem;
        color: #FFFFFF;
        margin-left: .2rem;

        div:last-child {
            font-size: .24rem;
            font-weight: 400;
            margin-top: .16rem;
        }
    }

    .detail_right {
        width: 1.64rem;
        // float: right;
    }

    .detail_text {
        position: absolute;
        right: .76rem;
        top: .7rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: .28rem;
        color: #1D69E4;
    }

}
</style>